<template>
  <div class="all">
    <div class="left">
      <div class="top">
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <div class="wtop">
                <span>我的资产 (元)</span>
                <p>{{ ss }}</p>
              </div>
              <div class="wbottom">
                <span>提现</span>
                <span>转入</span>
                <span>转账</span>
              </div>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <wtable :jmr="ss" /></div
          ></el-col>
        </el-row>
      </div>
      <p>银行卡</p>
      <div class="bottom">
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <img src="./images/01.png" alt="" /></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <img src="./images/01.png" alt="" /></div
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <img src="./images/01.png" alt="" /></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <img src="./images/02.png" alt="" /></div
          ></el-col>
        </el-row>
      </div>
    </div>
    <div class="right">
      <bill @hhh="jjj" />
    </div>
  </div>
</template>

<script>
import { ElRow, ElCol } from "element-plus";
import wtable from "./components/table.vue";
import bill from "./components/bill.vue";

export default {
  data() {
    return {
      ss: 0,
    };
  },

  components: {
    ElRow,
    ElCol,
    wtable,
    bill,
  },
  methods: {
    jjj(ss) {
      this.ss = ss;
    },
  },
};
</script>

<style lang="less" scoped>
.all {
  width: 100%;
  height: 520px;
  display: flex;

  .left {
    flex: 1;
    margin-right: 10px;
    border-radius: 8px;
    p {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
    }
    .wtop {
      height: 100px;
      span {
        font-size: 16px;
      }
      p {
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        color: #00adff;
        font-weight: 600;
        text-align: center;
      }
    }
    .wbottom {
      display: flex;
      height: 90px;
      line-height: 90px;
      span {
        display: inline-block;
        flex: 1;
        text-align: center;
        font-size: 16px;
        border: 1px solid #f5f5f5;
      }
    }
    .bottom {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .el-row {
      margin-bottom: 20px;
    }
    .el-row:last-child {
      margin-bottom: 0;
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
      height: 190px;
      background: #fff;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }
  .right {
    flex: 1;
    height: 610px;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
  }
}
</style>
